Es posible que te hayas encontrado con Same Origien Policy y la necesidad de implementar CORS (Cross-Origin Resource Sharing). En esta entrada, explicaremos CORS y su papel en la seguridad y el intercambio de datos entre diferentes dominios.

¿Qué es CORS?

En términos simples, CORS es un mecanismo que permite que un sitio web (origen) solicite datos de otro sitio web (destino) con diferentes dominios, esquemas o puertos. Es algo con la que más de uno se habrá encontrado desarrollando tanto front como back. Un ejemplo donde esto ha podido pasar es al intentar cargar una imagen de una URL diferente, o al hacer fetch de una API. CORS sirve para “relajar” las normas de Same Origien Policy.

Vamos con un ejemplo sencillo para entenderlo:

Imagina que tu sitio web está en www.ejemplo.com y necesitas cargar una imagen alojada en www.otraweb.com. Sin CORS, el navegador bloquearía la solicitud por motivos de seguridad.

¿Por qué es necesario CORS?

Lo del ejemplo anterior, ocurre porque el navegador implementa Same Origen Policy como parte de su modelo de seguridad que permite a un sitio web solicitar datos como imágenes, hojas de estilo, etc. de su misma dirección URL libremente, pero bloquea cualquier cosa de URL externas, a menos que se cumplan ciertas condiciones. De esta forma, el navegador protege a los usuarios de ataques maliciosos al intentar acceder a sitios que queden fuera de nuestro sitio web.

Por otra parte, esta política también puede limitar la funcionalidad de las aplicaciones web modernas que necesitan acceder a recursos de diferentes dominios. CORS permite a los desarrolladores sortear esta limitación de forma segura y controlada.

Petición del navegador

Cuando el navegador realiza una petición agrega un encabezado de origen de la solicitud si esa solicitud va a un servidor en el mismo origen, el navegador lo permite sin cuestionárselo; sin embargo, si esa misma petición va a una URL diferente, entonces se conoce como una Cross-Origen Request o una solicitud de origen cruzado, aquí es cuando el navegador limita la conexión con dicha URL a no ser que la configuración de CORS lo permita.

Respuesta del servidor

Al enviar la respuesta, el servidor añadirá el encabezado Access-control-Allow-origen. Su valor debe coincidir con el encabezado de origen de la solicitud o dicho encabezado puede ser un comodín que permita solicitudes desde cualquier URL.

Errores de CORS

Si no coinciden, aunque el navegador evitará que los datos de respuesta se compartan con el cliente, por motivos de seguridad esto generará un error en el navegador. Si como usuarios experimentamos este error no podremos hacer nada, a no ser que tengamos acceso al servidor. Teniendo acceso, solo tendremos que aplicar la configuración adecuada.

Ciertas respuestas HTTP como PUT o cualquier solicitud con un encabezado no estándar deberán verificarse previamente:

app.use(function(req, res, next) {
       res.header("Access-Control-Allow-Origin", "*");
       res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
       res.header('Access-Control-Allow-Methods', 'PUT, POST, GET, DELETE, OPTIONS');
          next();
    });

El navegador sabe perfectamente cuando realizar una verificación previa y primero realiza una solicitud usando las opciones del verbo HTTP. El servidor responderá aceptando la petición. Diciendo un “venga, permito que este origen realice solicitudes con los siguientes métodos”, momento en el cual la solicitud puede ocurrir sin miedo a un desastre.

Conclusión

Configurar CORS correctamente consiste en proteger a los clientes (es decir, a los navegadores). El único efecto secundario que CORS tiene para nuestro servidor web es que puede añadir algunos encabezados de respuesta para ayudar al navegador a tomar una decisión. La verdadera magia ocurre en el navegador.

CORS es un mecanismo fundamental para el intercambio seguro de datos entre diferentes dominios en la web. Comprender cómo funciona CORS te ayudará a desarrollar aplicaciones web robustas y sin errores.